<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@include file="common/tags.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@include file="common/ui.jsp"%>
<script type="text/javascript">

function updatetabs(tabPanel,title,urls){

    $("#"+tabPanel).tabs('select',title,urls);  
            var tab = $('#'+tabPanel).tabs('getSelected');       
            $("#"+tabPanel).tabs('update',{  
            tab:tab,  
            options:{  
               title:title,  
               style:{padding:'1px'},  
           //href:URL, // 使用href会导致页面加载两次，所以使用content代替  
               content:"<iframe width='100%' height='100%'  id='iframe' frameborder='0' scrolling='auto'  src='"+urls+"'></iframe>",  
           closable:false,  
           fit:true,  
           selected:true  
            }  
             });  
             
           // window.open(URL,urls);  
}
	/*
	*添加选项卡方法
	*/
	function addTab(title,url){
		//先判断是否存在标题为title的选项卡
		var tab=$('#tabs').tabs('exists',title);
		if(tab){
			
			//$('#tabs').tabs('select',title);	//若存在，则直接打开
			updatetabs('tabs',title,url);	//若存在，刷新
		}else{
			//否则创建
			$('#tabs').tabs('add',{
				title:title,
				content:"<iframe width='100%' height='100%'  id='iframe' frameborder='0' scrolling='auto'  src='"+url+"'></iframe>",
				closable:true
			});
		}
		
	}
	


	 
	</script>
</head>
<body class="easyui-layout">
	<!-- TOP -->
	<div data-options="region:'north',collapsed:false"
		style="height: 60px; background: #B3DFDA; padding: 10px">
		欢迎您登录系统：
		<shiro:principal property="name" />
		<a href="<%=path%>/login/logout">退出</a>
		<div style="padding: 5px; border: 1px solid #ddd">
			<a href="javascript:addTab('主页','');"
				class="easyui-linkbutton" data-options="plain:true">主页</a> <a
				href="#" class="easyui-menubutton"
				data-options="menu:'#mm1',iconCls:'icon-edit'">换肤</a> <a href="#"
				class="easyui-menubutton"
				data-options="menu:'#mm2',iconCls:'icon-help'">Help</a> <a href="#"
				class="easyui-menubutton" data-options="menu:'#mm3'">About</a>
		</div>
		<div id="mm1" style="width: 150px;">
			<div href="javascript:changeThemeFun('default');">default</div>
			<div href="javascript:changeThemeFun('gray');">gray</div>
			<div href="javascript:changeThemeFun('bootstrap');">bootstrap</div>
			<div href="javascript:changeThemeFun('metro');">metro</div>

		</div>
		<div id="mm2" style="width: 100px;">
			<div>Help</div>
			<div>Update</div>
			<div>about</div>
		</div>
		<div id="mm3" class="menu-content"
			style="width: 50px; background: #f0f0f0; padding: 10px; text-align: left">
			<p style="font-size: 10px; color: #444;">V1.0</p>
		</div>
	</div>
	<!-- LEFT -->

	<div data-options="region:'west',split:true,title:'菜单栏'"
		style="width: 235px;">

		<%-- <div title="系统管理" style="padding: 10px">
			<ul class="ww">
				<li onclick="javascript:addTab('用户管理','<%=path%>/user/index');">用户管理</li>
			</ul>
		</div> --%>

		<div class="easyui-accordion" data-options="fit:true,border:true"
			style="overflow: auto;">
			<ul id="et" class="easyui-tree"
				data-options="url:'<%=path%>/admin/menu',method:'get',animate:true,dnd:true">
			</ul>
		</div>

	</div>



	<!-- <div data-options="region:'east',split:true,collapsed:true,title:'右侧菜单'"	style="width: 100px; padding: 10px;">空白区域</div>
	<div data-options="region:'south',split:true,collapsed:true" style="height: 50px; background: #A9FACD; padding: 10px;">DORJE</div> -->
	<div data-options="region:'center',title:'内容'">
		<div class="easyui-tabs" data-options="fit:true,closable:true"
			id="tabs">
			<div title="主页">
				<iframe width='100%' height='100%' name="mailiframe" id='iframe'
					frameborder='0' scrolling='auto' src='<%=path%>/admin/main'></iframe>
			</div>
		</div>
	</div>

	<div id="menu" class="easyui-menu" style="width: 150px;">
		<div id="m-refresh">刷新</div>
		<div class="menu-sep"></div>
		<div id="m-closeall">全部关闭</div>
		<div id="m-closeother">关闭其他</div>
		<div class="menu-sep"></div>
		<div id="m-close">关闭</div>
	</div>
	<script type="text/javascript">
  	function onChangeTheme(theme){
  	  	alert(theme);
		var link = $('#content').find('link:first');
		link.attr('href', '<%=path%>/static/jquery-easyui-1.4.4/themes/'+theme+'/easyui.css');
	}
$(function(){
				
	$(function(){
			$(document).bind('contextmenu',function(e){
				e.preventDefault();
				$('#menu').menu('show', {
					left: e.pageX,
					top: e.pageY
				});
			});
		});
	
	$('#et').tree({
    onClick: function(node){
    if(node.attributes.url=='/#'){
    	 $.messager.alert("系统提示","该菜单不支持跳转","info");
		                return;
    }
		addTab(node.text,'<%=path%>	' + node.attributes.url);
					//alert(node.text);  // alert node text property when clicked
				}
			});

		});
	</script>

</body>
</html>